<template>
    <div class="askLeaveQuery">     
       

       <div class="searchPart">
            <SectionTitle text="干部请假查询" style="margin-left: 10px;"></SectionTitle>
            <div class="search">                
                <van-search                    
                    v-model="key"
                    show-action            
                    placeholder="输入姓名或工号"
                    @search="onClickButton"
                >
                <template #action>
                    <van-button @click="onClickButton" type="primary">搜索</van-button>                    
                </template>
            </van-search>
            </div>

            <van-dropdown-menu auto-locate>
                <van-dropdown-item v-model="value1" :options="option1" teleport="body" @change="handleDateChange" @click="handleDateChange"/>
                <van-dropdown-item v-model="value2" :options="option2" teleport="body" @change="handleLevelChange"/>
                <van-dropdown-item v-model="value3" :options="option3" teleport="body" @change="handleTypeChange"/>
            </van-dropdown-menu>
       </div>

       <div class="searchResult">
                <van-empty description="未查询到请假" v-if="nodata"/>

                <van-pull-refresh v-model="refreshing" @refresh="onRefresh" v-if="!nodata">

                    <div class="searchSummary asynDate" v-if="asynDate" style="margin-bottom:8px">
                        数据更新日期：{{ asynDate }}<br/>
                        <span class="asynDateDesc">按请假离校日期排序</span>
                    </div>


                    <van-list
                        class="searchResultList" 
                        v-model:loading="loading"
                        :finished="finished"
                        finished-text="没有更多了"
                        @load="onLoad"
                    >

                    <div v-for="item in list">
                        <ListGroupFlag :text="item.college_name" v-if="item.groupFlag"/>
                        <ColorItem :color="getColor(item)" class="searchItem"   :colorBorder="false"  v-else>       
                            <AskLeaveLog :color="getColor(item)" :item="item" showBtns @detail-popup="handleDetailPopup" />
                        </ColorItem>                        
                    </div>
                    </van-list>
                </van-pull-refresh>
 
        </div>        
    </div>
    <VanBackTop  v-if="showBackTop"/>
    <van-calendar v-model:show="showCalendar" type="range" @confirm="onConfirmCalendar" teleport="body" :min-date="minDate" :max-date="maxDate"/>

</template>
<script lang="ts" setup>
import AskLeaveLog from '@/components/AskLeaveLog.vue';
import ColorItem from '@/components/ColorItem.vue';
import SectionTitle from '@/components/SectionTitle.vue';
import { onMounted, ref } from 'vue';
import { type AskLeave } from '@/types/common';
import http from '@/api/request'
import { formateDateYMD } from '@/util/dateTool';
import { saveLog } from '@/api/queryLog';
import ListGroupFlag from '@/components/listGroupFlag.vue';
import { groupAskLeaveList } from '@/service/AskLeaveService';

interface AskLeaveList{
    list:AskLeave[]
    asynDate:string
}
const loading = ref(false)
const begin = ref('')
const end= ref('')
const finished = ref(false)
const list = ref<AskLeave[]>([]);
const nodata = ref(false);
const key = ref('')
const showBackTop = ref(true)
const asynDate = ref('')
const onClickButton = ()=>{
    pageNo =1;
    saveLog("干部请假查询（搜索框）","tab_ask_leave",key.value+"")
    getList();
}
const refreshing = ref(false)
const value1 = ref(0);
const value2 = ref('');
const value3 = ref('')
const showCalendar = ref(false)
const otherBegin = ref('')
const otherEnd = ref('')
const minDate= new Date(2010, 0, 1);
const maxDate= new Date(2050, 0, 31);

var pageNo = 1;

const option1 = ref([
      { text: '所有日期', value: 0 },
      { text: '今天', value: 1 },      
      { text: '未来3天', value: 2 },
      { text: '未来1个月', value: 3 }      ,
      { text: '其他日期', value: -1 }      
    ]);
    const option2 = [
      { text: '所有职级', value: '' },
      { text: '校级', value: '1' },
      { text: '正职', value: '2' },
      { text: '副职', value: '3' },
    ];

    const option3 = [
      { text: '所有类型', value: '' },
      { text: '学术交流', value: '1' },
      { text: '工作会议', value: '2' },
      { text: '上级工作任务', value: '3' },
      { text: '学术会议', value: '4' },
      { text: '合作研究', value: '5' },
      { text: '长期任教', value: '6' },
      { text: '短期讲学', value: '7' },
      { text: '培训学习', value: '8' },
      { text: '进修访学', value: '9' },
      { text: '攻读学位', value: '10' },
      { text: '旅游', value: '11' },
      { text: '探亲', value: '12' },
      { text: '其他', value: '13' },
    ];

    onMounted(()=>{
        getList()
    })

const handleDateChange =()=>{
    if(value1.value == 0){
        begin.value = ''
    }else if(value1.value == -1){
        //选择日期
        showCalendar.value = true;
    }
    else{
        var now = new Date();
        begin.value = formateDateYMD(now);

        if(value1.value == 1){
            end.value = formateDateYMD(now);
        }

        if(value1.value == 2){
            now.setDate(now.getDate()+3)
            end.value = formateDateYMD(now);
        }

        if(value1.value == 3){
            now.setDate(now.getDate()+30)
            end.value = formateDateYMD(now);
        }
    }    

    pageNo = 1;
    saveLog("干部请假查询（日期）","tab_ask_leave",value1.value+"")
    getList();
}



const onConfirmCalendar =  (values:Date[]) => {
      const [startDate, endDate] = values;
      showCalendar.value = false;

      //查询条件
      begin.value = formateDateYMD(startDate);
      end.value = formateDateYMD(endDate);     

      //显示标签
      otherBegin.value = formateDateYMD(startDate);
      otherEnd.value = formateDateYMD(endDate);     

      var opt = option1.value;
      opt[4].text = begin.value+"至"+end.value;
      option1.value = opt;

      pageNo = 1;
      getList();
};

const handleTypeChange = ()=>{    
    pageNo = 1;
    saveLog("干部请假查询（类型）","tab_ask_leave",value3.value+"")
    getList();
}
const handleLevelChange = ()=>{
    pageNo = 1;
    saveLog("干部请假查询（级别）","tab_ask_leave",value2.value+"")
    getList();
}

const getList = ()=>{
    
    http.get<AskLeaveList>('/askleave/dataList',{
        pageNo,key:key.value,begin:begin.value,end:end.value,
        taskType:value3.value,
        postLevel:value2.value
    }).then((resp)=>{
        refreshing.value=false;
        loading.value=false;
        nodata.value = false;

        if(pageNo ==1) list.value=[];

        if(resp.data?.asynDate)asynDate.value = resp.data?.asynDate;

        if(resp.data?.list){
            if(resp.data.list.length > 0){
                var temp = list.value.concat( resp.data.list);
                list.value = temp;

                //group list
                temp = groupAskLeaveList(temp);
                list.value = temp;
                

            }else{
                finished.value = true;
                if(pageNo == 1){
                    nodata.value = true;
                }
            }
            
        }else{
            finished.value=true;
        }
    })
}

const handleDetailPopup = (show:boolean)=>{
    showBackTop.value = !show;
}

const onLoad = ()=>{
    if(pageNo ==1 && list.value.length == 0){ //初始化，不加载
        loading.value=false;
        return;
    }

    pageNo++;
    getList();
}

const onRefresh = ()=>{
    pageNo = 1;
    finished.value=false;
    getList();
}

const getColor = (item:AskLeave)=>{
    
    if(item.post_level == '1')return 'red'
    if(item.post_level == '2')return '#1976D2'
    if(item.post_level == '3')return '#3390ff'
    return '#3390ff'
}
</script>

<style lang="less" scoped>
.askLeaveQuery{

    min-height: 100vh;
    padding-top: 45px;

  
    .searchPart{        
        background-color: #fff;
        margin:0px;
        margin-top: 20px;
        
        padding-top: 20px;

        .search{
            margin-top: 10px;
        }
    }
    
    .searchResultList{
        .searchItem{
            margin-bottom: 6px;
        }
    }

    .subSection{
        line-height: 30px;
    }

    .searchResult{        
        margin:10px;
        .searchItem{
            background-color: #fff;
        }
    }
}

</style>

<style>
.askLeaveQuery .van-search__content {
    border-radius: 0;
    border: 1px solid #004e9b;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border-right: none;
}

.askLeaveQuery .van-search__field {
    height: 42px;
}

.askLeaveQuery .van-search__action {
    padding-left: 0;
}

.askLeaveQuery .van-search__action .van-button {
    border-radius: 0;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
</style>